import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Layout from '@/layout/index.vue'
import Outlet from '@/components/outlet.vue'
import store from '@/store'

Vue.use(VueRouter)

// 路由配置规则
const routes: Array<RouteConfig> = [
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: 'login' */ '@/views/login/index.vue')
  },
  {
    path: '/',
    component: Layout,
    meta: {
      requireAuth: true
    },
    children: [
      {
        path: '', // 默认子路由
        name: 'home',
        component: () => import(/* webpackChunkName: 'home' */ '@/views/home/index.vue')
      },
      {
        path: '/role',
        name: 'role',
        meta: { title: '角色管理' },
        component: Outlet,
        children: [
          {
            path: '',
            component: () => import(/* webpackChunkName: 'role' */ '@/views/role/index.vue')
          },
          {
            path: 'allocMenu/:roleId',
            props: true,
            name: 'alloc-menu',
            component: () => import(/* webpackChunkName: 'role' */ '@/views/role/alloc-menu.vue'),
            meta: { title: '分配菜单', activeMenuPath: '/role' }
          },
          {
            path: 'allocResource/:roleId',
            props: true,
            name: 'alloc-resource',
            component: () => import(/* webpackChunkName: 'role' */ '@/views/role/alloc-resource.vue'),
            meta: { title: '分配资源', activeMenuPath: '/role' }
          }
        ]
      },
      {
        path: '/menu',
        name: 'menu',
        meta: { title: '菜单管理' },
        component: Outlet,
        children: [
          {
            path: '',
            component: () => import(/* webpackChunkName: 'menu' */ '@/views/menu/index.vue')
          },
          {
            path: 'create',
            name: 'menu-create',
            component: () => import(/* webpackChunkName: 'menu' */ '@/views/menu/create-or-edit.vue'),
            meta: { title: '添加菜单', activeMenuPath: '/menu' }
          },
          {
            path: 'update',
            name: 'menu-update',
            component: () => import(/* webpackChunkName: 'menu' */ '@/views/menu/create-or-edit.vue'),
            meta: { title: '编辑菜单', activeMenuPath: '/menu' }
          }
        ]
      },
      {
        path: '/resource',
        name: 'resource',
        meta: { title: '资源管理' },
        component: () => import(/* webpackChunkName: 'resource' */ '@/views/resource/index.vue')
      },
      {
        path: '/course',
        name: 'course',
        meta: { title: '课程管理' },
        component: Outlet,
        children: [
          {
            path: '',
            component: () => import(/* webpackChunkName: 'course' */ '@/views/course/index.vue')
          },
          {
            path: 'create',
            name: 'course-create',
            component: () => import(/* webpackChunkName: 'course' */ '@/views/course/create-or-edit.vue'),
            meta: { title: '添加课程', activeMenuPath: '/course' }
          },
          {
            path: 'update/:courseId',
            props: true,
            name: 'course-update',
            component: () => import(/* webpackChunkName: 'course' */ '@/views/course/create-or-edit.vue'),
            meta: { title: '编辑课程', activeMenuPath: '/course' }
          },
          {
            path: 'content/:courseId',
            props: true,
            name: 'course-content',
            component: () => import(/* webpackChunkName: 'course' */ '@/views/course/content.vue'),
            meta: { title: '课程内容', activeMenuPath: '/course' }
          }
        ]
      },
      {
        path: '/user',
        name: 'user',
        meta: { title: '用户管理' },
        component: () => import(/* webpackChunkName: 'user' */ '@/views/user/index.vue')
      },
      {
        path: '/advert',
        name: 'advert',
        meta: { title: '广告列表' },
        component: () => import(/* webpackChunkName: 'advert' */ '@/views/advert/index.vue')
      },
      {
        path: '/advert-space',
        name: 'advert-space',
        meta: { title: '广告位列表' },
        component: () => import(/* webpackChunkName: 'advert-space' */ '@/views/advert-space/index.vue')
      }
    ]
  },
  {
    path: '*',
    name: '404',
    component: () => import(/* webpackChunkName: '404' */ '@/views/error-page/404.vue')
  }
]

const router = new VueRouter({
  routes
})

router.beforeEach((to, from, next) => {
  const requireAuth = to.matched.some(route => route.meta.requireAuth)
  if (requireAuth && !store.state.user) {
    next({
      name: 'login',
      query: {
        redirect: to.path
      }
    })
  } else {
    next()
  }
})

export default router
